<template>
	<view class="top">

		<view class="top_center">消息中心</view>
	</view>
	<view class="tabs">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="rgb(62, 211, 45)" class="titleNav"></uni-segmented-control>
		<view class="content">
			<!-- 第一个模块 -->
			<view v-show="current === 0">
				<view class="desc" v-for="(item,index) in dialogue" @click="goToDetail(index)">
					<image :src="item.img" mode="" class="img"></image>
					<view class="rht">
						<view class="">
							<h5>{{item.name}}</h5>
							<view class="price">
								{{item.context}}
							</view>
						</view>
						<!-- <view class="content-wrapper" :class="{ 'is-collected': isCollected }" @click="toggleCollect">
							<uni-icons type="heart" size="30" color="#777" v-show="!isCollected"></uni-icons>
							<span>{{ isCollected ? '已收藏' : '收藏' }}</span>
						</view> -->
						<view class="">
							<view class="price">{{item.time}}</view>
							<uni-badge class="uni-badge-left-margin" text="1" type="warning" size="normal" />
						</view>
					</view>

				</view>
			</view>
			<!-- 模块二 -->
			<view v-show="current === 1">

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['消息中心', '平台消息'],
				current: 0,
				dialogue: [{
					img: "../../static/imgs1.jpg",
					name: "张三",
					context: "你好",
					time:"30分钟前"
				},
				{
					img: "../../static/imgs2.jpg",
					name: "李四",
					context: "你好",
					time:"30分钟前"
				},
				{
					img: "../../static/imgs3.jpg",
					name: "五五",
					context: "你好",
					time:"30分钟前"
				}
				]
			}
		},
		onLoad() {

		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			toggleCollect() {
				// 判断当前是否已经被收藏，如果已被收藏，则移除，否则添加
				this.isCollected = !this.isCollected

				if (this.isCollected) {
					// 添加到收藏列表
					// ...
				} else {
					// 从收藏列表中移除
					// ...
				}
			},
			goToDetail(index){
				console.log("index：",index);
				console.log(this.dialogue[index].img);
				console.log(this.dialogue[index].name);
				uni.navigateTo({
					url:`/pages/detail/detail?img=${this.dialogue[index].img}&name=${this.dialogue[index].name}&context=${this.dialogue[index].context}&time=${this.dialogue[index].time}`
				})
			}
		}
	}
</script>

<style lang="less">
	.top_center {
		/* height: 50rpx; */
		line-height: 150rpx;
		text-align: center;
	}

	.titleNav {
		font-size: 30rpx;
	}
	.desc {
		width: 90%;
		margin-top: 20rpx;
		margin-left: 5%;
		display: flex;
		background-color: rgb(246, 246, 246);
		padding: 20rpx;
		border-radius: 40rpx;
	
		.img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}

		.rht {
			vertical-align: top;
			width: 70%;
			margin-left: 5%;
			display: inline-block;
			
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
		}
	
		.price {
			color: rgb(164, 170, 167);
			font-size: 24rpx;
	
		}
	}
	.uni-badge-left-margin{
		margin-left: 40rpx;
	}
	
</style>